 /* 获取元素 */
 /* 因为数量太大所以通过js来创建 */
 var year = document.querySelector('.year');
 var month = document.querySelector('.month');
 var day = document.querySelector('.day');
 var hour = document.querySelector('.hour');
 var minute = document.querySelector('.minute');
 var second = document.querySelector('.second');
 var yearSpan = year.querySelector('span');
 /* 创建时间 倒数第二个参数判断要不要补零*/
 create(13, month, '月', false, 1);
 create(31, day, '日', false, 1);
 create(24, hour, '时', true, 0);
 create(60, minute, '分', true, 0);
 create(60, second, '秒', true, 0);
 /* 立即执行一次 */
 (timer())
 /* 获取当前时间 */
 setInterval(timer, 1000);
 /* 摆成圆形 */
 rot(second, '400px');
 rot(minute, '320px');
 rot(hour, '240px');
 rot(day, '160px');
 rot(month, '100px');
 /* 函 数 */
 /* 展示表盘函数 */
 function rot(target, distance) {
   var rotBox = target.children;
   for (var i = 0; i < rotBox.length; i++) {
     rotBox[i].style.transform = 'rotate(' + (360 / rotBox.length) * i + 'deg)' + 'translateX(' + distance +
       ')';
   }
 }
 /* 创建的元素过多，采用建立文档碎片的方式 */
 function create(num, date, target, bool, origin) {
   var fragment = document.createDocumentFragment();
   for (var i = origin; i < num; i++) {
     var j = i;
     if (bool) {
       j = j > 9 ? j : '0' + j;
     }
     var span = document.createElement('span');
     span.appendChild(document.createTextNode(j + target));
     fragment.appendChild(span);
   }
   date.appendChild(fragment);
 }
 /* 获取时间 */
 function timer() {
   var time = new Date();
   var nowYear = time.getFullYear();
   var nowMonth = time.getMonth() + 1;
   var nowDay = time.getDate();
   var nowHour = time.getHours();
   var nowMinute = time.getMinutes();
   var nowSecond = time.getSeconds();
   /* 年份直接填 */
   yearSpan.innerHTML = nowYear + '年';
   yearSpan.className = 'now';
   /* 旋转 */
   var rotateH = nowHour * 15;
   var rotateM = nowMinute * 6;
   var rotateS = nowSecond * 6;
   var rotateD = (nowDay - 1) * 12;
   var rotateMo = (nowMonth - 1) * 30;
   second.style.transform = 'rotate(' + (-rotateS) + 'deg' + ')';
   minute.style.transform = 'rotate(' + (-rotateM) + 'deg' + ')';
   hour.style.transform = 'rotate(' + (-rotateH) + 'deg' + ')';
   day.style.transform = 'rotate(' + (-rotateD) + 'deg' + ')';
   month.style.transform = 'rotate(' + (-rotateMo) + 'deg' + ')';
   /* 更改当前时间的样式 */
   clearClass(month)
   clearClass(day);
   clearClass(hour);
   clearClass(minute);
   clearClass(second);
   month.children[nowMonth - 1].className = 'now';
   day.children[nowDay - 1].className = 'now';
   hour.children[nowHour].className = 'now';
   minute.children[nowMinute].className = 'now';
   second.children[nowSecond].className = 'now';
 }
 /* 清除样式的函数 */
 function clearClass(target) {
   for (var i = 0; i < target.children.length; i++) {
     target.children[i].className = '';
   }
 }